<!--
  用户管理-企业用户-身份认证页面
 -->
<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="待审核" name="1">
        <!-- 搜索工作栏 -->
        <el-form
          ref="leftQueryForm"
          :model="leftQueryParams"
          size="small"
          :inline="true"
          label-width="68px"
        >
          <!-- todo 赞不支持姓名搜索 -->
          <el-form-item label="姓名" prop="nickname">
            <el-input
              v-model="leftQueryParams.nickname"
              placeholder="请输入姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号码" prop="phoneNumber">
            <el-input
              v-model="leftQueryParams.phoneNumber"
              placeholder="请输入手机号码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="企业名称" prop="companyName">
            <el-input
              v-model="leftQueryParams.companyName"
              placeholder="请输入企业名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!-- todo 赞不支持职位搜索 -->
          <el-form-item label="职位" prop="status">
            <el-input
              v-model="leftQueryParams.status"
              placeholder="请输入职位"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!-- todo 暂不支持部门搜索 -->
          <el-form-item label="部门" prop="status">
            <el-input
              v-model="leftQueryParams.accountType"
              placeholder="请输入部门"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-refresh"
              @click="resetQuery"
            >重置</el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
            >搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 列表 -->
        <el-table v-loading="loading" :data="leftList">
          <el-table-column label="序号" type="index" />
          <el-table-column
            label="认证材料"
            align="center"
            prop="businessLicense"
            width="180"
          >
            <template slot-scope="scope">
              <Thumbnail
                :url="scope.row.businessLicense"
                :list="[scope.row.businessLicense]"
                :size="126"
              />
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center" prop="applyUserName" />
          <el-table-column label="手机号" align="center" prop="phoneNumber">
            <template slot-scope="scope">
              <span>{{
                scope.row.phoneNumber
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="部门" align="center" prop="dept" />
          <el-table-column label="职位" align="center" prop="job" />
          <el-table-column label="认证企业" align="center" prop="companyName" />
          <el-table-column
            label="提交时间"
            align="center"
            prop="createTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleCheck(scope.row)"
              >查看</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="openCheckDialog(scope.row)"
              >审核</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <pagination
          v-show="leftTotal > 0"
          :total="leftTotal"
          :page.sync="leftQueryParams.pageNo"
          :limit.sync="leftQueryParams.pageSize"
          @pagination="leftGetList"
        />
      </el-tab-pane>
      <el-tab-pane label="已审核" name="2">
        <!-- 搜索工作栏 -->
        <el-form
          ref="rightQueryForm"
          :model="rightQueryParams"
          size="small"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="姓名" prop="nickname">
            <el-input
              v-model="rightQueryParams.nickname"
              placeholder="请输入姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号码" prop="phoneNumber">
            <el-input
              v-model="rightQueryParams.phoneNumber"
              placeholder="请输入手机号码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="企业名称" prop="companyName">
            <el-input
              v-model="rightQueryParams.companyName"
              placeholder="请输入企业名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="审核结果" prop="status">
            <el-select
              v-model="rightQueryParams.status"
              placeholder="请选择企业状态"
              clearable
              size="small"
            >
              <el-option
                v-for="dict in this.getDictDatas(DICT_TYPE.AUTHORIZED_STATUS)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="审核人" prop="status">
            <el-input
              v-model="rightQueryParams.accountType"
              placeholder="请输入审核人"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-refresh"
              @click="resetQuery"
            >重置</el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
            >搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 列表 -->
        <el-table v-loading="loading" :data="rightList">
          <el-table-column label="序号" type="index" />
          <el-table-column
            label="认证材料"
            align="center"
            prop="businessLicense"
            width="180"
          >
            <template slot-scope="scope">
              <Thumbnail
                :url="scope.row.businessLicense"
                :list="[scope.row.businessLicense]"
                :size="126"
              />
            </template>
          </el-table-column>
          <el-table-column label="用户姓名" align="center" prop="applyUserName" />
          <el-table-column label="手机号" align="center" prop="phoneNumber">
            <template slot-scope="scope">
              <span>{{
                scope.row.phoneNumber
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="认证企业" align="center" prop="companyName" />
          <el-table-column label="部门" align="center" prop="dept" />
          <el-table-column label="职位" align="center" prop="job" />
          <!-- todo 暂无审核时间 -->
          <el-table-column
            label="审核时间"
            align="center"
            prop="createTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <!-- todo 暂无审核结果 -->
          <el-table-column
            label="审核结果"
            align="center"
            prop="authorizedStatus"
          >
            <template slot-scope="scope">
              <!-- authorized/unauthorized/reject -->
              {{ scope.row.authorizedStatus === "authorized" ? "通过" : "" }}
              {{
                scope.row.authorizedStatus === "unauthorized" ? "未通过" : ""
              }}
              {{ scope.row.authorizedStatus === "reject" ? "被驳回" : "" }}
            </template>
          </el-table-column>
          <!-- todo 暂无审核人 -->
          <el-table-column label="审核人" align="center" prop="checker" />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleCheck(scope.row)"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <pagination
          v-show="rightTotal > 0"
          :total="rightTotal"
          :page.sync="rightQueryParams.pageNo"
          :limit.sync="rightQueryParams.pageSize"
          @pagination="rightGetList"
        />
      </el-tab-pane>
    </el-tabs>
    <!-- 审核 -->
    <el-dialog
      title="审核"
      :visible.sync="auditDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-radio v-model="checkResult" label="1">通过</el-radio>
      <el-radio v-model="checkResult" label="2">驳回</el-radio>
      <p :class="checkResult!=='1'?'must':''">{{ checkResult === "1" ? "确定审核通过？" : "确定审核驳回？" }}</p>
      <el-input
        v-model="reason"
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 6 }"
        :placeholder="`${
          checkResult === '1' ? '审核通过' : '审核驳回'
        }可补充审核意见，300字以内`"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeCheckDialog">取 消</el-button>
        <el-button type="primary" @click="submitCheck">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看/编辑 -->
    <el-dialog
      title="查看"
      :visible.sync="checkDialog"
      width="50%"
      append-to-body
    >
      <el-tabs v-model="activeCheck" type="card">
        <el-tab-pane label="用户信息" name="userForm">
          <p>用户信息</p>
          <el-form ref="userForm" :model="userForm" label-width="80px">
            <el-form-item label="姓名" prop="applyUserName">
              <el-input
                v-model="userForm.applyUserName"
                disabled
                placeholder="请输入姓名"
              />
            </el-form-item>
            <el-form-item label="企业名称" prop="companyName">
              <el-input
                v-model="userForm.companyName"
                disabled
                placeholder="请输入企业名称"
              />
            </el-form-item>
            <el-form-item label="手机号" prop="phoneNumber">
              <el-input
                v-model="userForm.phoneNumber"
                disabled
                placeholder="请输入手机号"
              />
            </el-form-item>
            <el-form-item label="部门" prop="dept">
              <el-input
                v-model="userForm.dept"
                disabled
                placeholder="请输入部门"
              />
            </el-form-item>
            <el-form-item label="职位" prop="job">
              <el-input
                v-model="userForm.job"
                disabled
                placeholder="请输入职位"
              />
            </el-form-item>
            <el-form-item label="座机号" prop="tel">
              <el-input
                v-model="userForm.tel"
                disabled
                placeholder="请输入座机号"
              />
            </el-form-item>
            <el-form-item label="邮箱号" prop="email">
              <el-input
                v-model="userForm.email"
                disabled
                placeholder="请输入邮箱号"
              />
            </el-form-item>
            <el-form-item label="账户类型">
              <el-select disabled value="1">
                <el-option value="1" label="企业管理员">企业管理员</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="身份证号码" prop="cardNo">
              <el-input
                v-model="userForm.cardNo"
                disabled
                placeholder="请输入身份证号码"
              />
            </el-form-item>
            <el-form-item label="身份证正面">
              <ImagePreview :width="200" :height="200" :src="companyForm.authenticationFrontPictureUrl || ''" />
            </el-form-item>
            <el-form-item label="身份证反面">
              <ImagePreview :width="200" :height="200" :src="companyForm.authenticationBackPictureUrl || ''" />

            </el-form-item>
            <el-form-item label="在职证明">
              <ImagePreview :width="200" :height="200" :src="companyForm.onjobUrl || ''" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="企业信息" name="second">
          <el-form ref="companyForm" :model="companyForm" label-width="150px">
            <el-form-item label="统一社会信用代码" prop="creditCode">
              <el-input
                v-model="companyForm.creditCode"
                disabled
                placeholder="请输入统一社会信用代码"
              />
            </el-form-item>
            <el-form-item label="营业执照图片" prop="businessLicense">
              <ImagePreview :width="200" :height="200" :src="companyForm.businessLicense || ''" />
            </el-form-item>
            <el-form-item label="行业类型" prop="industryType">
              <el-cascader
                v-model="companyForm.industryType"
                disabled
                :show-all-levels="false"
                :options="businessAreaData"
              />
            </el-form-item>
            <el-form-item label="邮政编码" prop="postCode">
              <el-input
                v-model="companyForm.postCode"
                disabled
                placeholder="请输入邮政编码"
              />
            </el-form-item>
            <el-form-item label="经营状态" prop="businessStatus">
              <el-radio-group v-model="companyForm.businessStatus" disabled>
                <el-radio
                  v-for="dict in this.getDictDatas(
                    DICT_TYPE.COMPANY_BUSINESS_STATUS
                  )"
                  :key="dict.value"
                  :label="dict.value"
                >{{ dict.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="注册资本（元）" prop="registeredCapital">
              <el-input
                v-model="companyForm.registeredCapital"
                disabled
                placeholder="请输入注册资本"
              />
            </el-form-item>
            <el-form-item label="成立日期" prop="establishDate">
              <el-date-picker
                v-model="companyForm.establishDate"
                disabled
                clearable
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择成立日期"
              />
            </el-form-item>
            <el-form-item label="法定代表人" prop="legalPerson">
              <el-input
                v-model="companyForm.legalPerson"
                disabled
                placeholder="请输入法定代表人"
              />
            </el-form-item>
            <el-form-item label="法人身份证正面">
              <ImagePreview :width="200" :height="200" :src="companyForm.legalPersonFrontPictureUrl || ''" />
              <p v-if="companyForm.legalPersonFrontPictureUrl === ''">用户未上传图片</p>
            </el-form-item>
            <el-form-item label="法人身份证反面">
              <ImagePreview :width="200" :height="200" :src="companyForm.legalPersonBackPictureUrl || ''" />
              <p v-if="companyForm.legalPersonBackPictureUrl === ''">用户未上传图片</p>
            </el-form-item>
            <el-form-item label="子企业关系证明图片">
              <ImagePreview :width="200" :height="200" :src="companyForm.subCompanyRelationshipCertificatePicture || ''" />
              <p v-if="companyForm.subCompanyRelationshipCertificatePicture === ''">用户未上传图片</p>
            </el-form-item>
            <el-form-item label="企业规模" prop="scale">
              <el-select
                v-model="companyForm.scale"
                disabled
                placeholder="请输入企业规模"
              >
                <el-option
                  v-for="dict in this.getDictDatas(DICT_TYPE.ENTERPRISE_SCALE)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="企业类型" prop="companyType">
              <el-select
                v-model="companyForm.companyType"
                disabled
                placeholder="请选择企业状态"
              >
                <el-option
                  v-for="dict in this.getDictDatas(DICT_TYPE.COMPANY_TYPE)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="注册地址" prop="provinceAndCity">
              <el-cascader
                v-model="companyForm.provinceAndCity"
                :options="provinceAndCityData"
                disabled
                placeholder="--"
              />
            </el-form-item>
            <el-form-item label="详细地址" prop="registeredAddress">
              <el-input
                v-model="companyForm.registeredAddress"
                disabled
                placeholder="请输入详细地址"
              />
            </el-form-item>
            <el-form-item label="经营范围" prop="businessScope">
              <el-input
                v-model="companyForm.businessScope"
                type="textarea"
                disabled
                placeholder="请输入经营范围"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- <el-tab-pane label="身份认证" name="third">
          <el-tag v-if="companyForm.authenticationFrontPictureUrl" type="success">已实名认证</el-tag>
        </el-tab-pane> -->
        <el-tab-pane label="身份认证" name="third">
          <el-tag v-if="isAuth" type="success">{{ '三要素已实名认证' }}</el-tag>
          <el-tag v-else type="warning">{{ authText || '三要素实名认证失败' }}</el-tag>
        </el-tab-pane>
      </el-tabs>
      <el-row type="flex" class="row-bg" justify="end">
        <el-button @click="checkDialog = false">取 消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCompanyPage,
  companyAuthentication
} from '@/api/school-admin-api/userManage/company/index.js'
import { isRealName } from '@/api/login.js'
import businessAreaData from '@/utils/businessAreaData.js'
import { deepClone } from '@/utils/index'
import { provinceAndCityData, getProvinceAndCityDataValue } from '@/utils/frontDataDict.js'
import moment from 'moment'
import ImagePreview from '../../../components/ImagePreview/index.vue'

export default {
  name: 'Company',
  components: {
    ImagePreview
  },
  data() {
    return {
      activeCheck: 'userForm',
      // 查看审核详情弹窗
      checkDialog: false,
      reason: '',
      auditDialog: false,
      checkResult: '1',
      activeName: '1',
      provinceAndCityData,
      // 企业行业类型数据，二级联动
      businessAreaData: businessAreaData,
      // 遮罩层
      loading: true,
      // 待审核-总条数
      leftTotal: 0,
      // 已审核-总条数
      rightTotal: 0,
      // 企业管理列表
      leftList: [],
      // 已审核企业列表
      rightList: [],
      // 弹出层标题
      title: '',
      // 待审核查询参数
      leftQueryParams: {
        pageNo: 1,
        pageSize: 10,
        nickname: null,
        phoneNumber: null,
        companyName: null,
        // authorized/unauthorized/reject
        authorizedStatus: 'unauthorized',
        authorizedStatus1: 'authorizeding',
        status: null,
        accountType: '' // 账号类型
      },
      rightQueryParams: {
        pageNo: 1,
        pageSize: 10,
        nickname: null,
        phoneNumber: null,
        companyName: null,
        // authorized/unauthorized/reject
        authorizedStatus: 'authorized',
        authorizedStatus1: 'reject', // hack，为了支持多个认证状态同时搜索，临时加的字段
        status: null,
        accountType: '' // 账号类型
      },
      // 用户信息表
      userForm: {
        applyUserName: '',
        dept: '',
        job: '',
        tel: '',
        email: '',
        companyName: '',
        phoneNumber: '',
        authenticationFrontPictureUrl: '', // 身份证正面
        authenticationBackPictureUrl: '', // 身份证反面
        cardNo: '', // 手身份证号码
        onjobUrl: '' // 在职证明
      },
      // 企业信息表
      companyForm: {
        creditCode: '', // 统一信用代码
        businessLicense: '', // 营业执照
        industryType: [], // 行业类型
        postCode: '', // 邮政编码
        businessStatus: '', // 经营状态
        registeredCapital: '', // 注册资本
        establishDate: '', // 成立日期
        legalPerson: '', // 法人
        legalPersonFrontPictureUrl: '', // 法人身份证正面
        legalPersonBackPictureUrl: '', // 法人身份证反面
        subCompanyRelationshipCertificatePicture: '', // 子母企业关系证明
        scale: '', // 企业规模
        companyType: '', // 企业类型
        provinceAndCity: '',
        registeredAddress: '', // 注册地址
        businessScope: '' // 经营范围
      },
      authText: '',
      currentRow: null,
      isAuth: false // 企业提交手机号变更的新手机，是否完成了阿里云三要素的审核
    }
  },
  created() {
    this.leftGetList()
    this.rightGetList()
  },
  methods: {
    // 打开审核弹窗
    openCheckDialog(row) {
      this.currentRow = deepClone(row)
      this.currentRow.establishDate =
        typeof this.currentRow.establishDate === 'number'
          ? moment(this.currentRow.establishDate).format('yyyy-MM-DD')
          : ''
      this.auditDialog = true
    },
    // 提交审核
    submitCheck() {
      const param = {
        authorizedStatus:
          // authorized/unauthorized/reject
          this.checkResult === '1' ? 'authorized' : 'reject',
        id: Number(this.currentRow.id),
        remark: this.reason
      }
      if (Number(this.checkResult) !== 1 && !param.remark) {
        this.$message.error('请填写驳回理由')
        return
      }
      companyAuthentication(param).then((res) => {
        if (res.code === 0) {
          this.$message.success('审核已提交')
          this.closeCheckDialog()
          this.leftGetList()
        }
      })
    },
    // 关闭审核弹窗
    closeCheckDialog() {
      this.checkResult = '1'
      this.reason = ''
      this.auditDialog = false
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    handleClick(data) {
      if (Number(data.index) === 0) {
        this.leftGetList()
      } else {
        this.rightGetList()
      }
    },
    // 请求待审核列表数据
    leftGetList() {
      this.loading = true
      // 处理查询参数
      const params = { ...this.leftQueryParams }
      // 执行查询
      getCompanyPage(params).then((response) => {
        this.leftList = response.data.list
        this.leftTotal = response.data.total
        this.loading = false
      })
    },
    /** 请求已审核列表数据 */
    rightGetList() {
      this.loading = true
      // 处理查询参数
      const params = { ...this.rightQueryParams }
      // 执行查询
      getCompanyPage(params).then((response) => {
        this.rightList = response.data.list
        this.rightTotal = response.data.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.activeName === '1') {
        this.leftQueryParams.pageNo = 1
        this.leftGetList()
      } else {
        this.rightQueryParams.pageNo = 1
        this.rightGetList()
      }
    },
    // 重制搜索条件
    resetQuery() {
      if (this.activeName === '1') {
        this.resetForm('leftQueryForm')
        this.handleQuery()
      } else {
        this.resetForm('rightQueryForm')
        this.handleQuery()
      }
    },
    /** 打开认证详情页面 */
    async handleCheck(row) {
      console.log('row>>>', row)
      this.currentRow = deepClone(row)
      await isRealName({
        cardNo: row.cardNo,
        phone: row.phoneNumber,
        userName: row.applyUserName
      }).then(res => {
        const { code, message } = res.data
        if (Number(code) === 1) {
          this.isAuth = true
        } else {
          this.isAuth = false
        }
        this.authText = message
        this.openuserInfo = true
      })
      this.currentRow.establishDate =
        typeof this.currentRow.establishDate === 'number'
          ? moment(this.currentRow.establishDate).format('yyyy-MM-DD')
          : ''
      try {
        this.currentRow.industryType = JSON.parse(this.currentRow.industryType)
      } catch (error) {
        this.currentRow.industryType = []
      }
      try {
        (this.currentRow.city && this.currentRow.province) &&
          (this.currentRow.provinceAndCity = getProvinceAndCityDataValue(this.currentRow.province + this.currentRow.city) || '')
      } catch {
        () => {}
      }
      Object.assign(this.userForm, this.currentRow)
      Object.assign(this.companyForm, this.currentRow)
      this.checkDialog = true
    }
  }
}
</script>
<style  lang="scss" scoped>
.must{
  display: flex;
  align-items: center;
  &::before{
    content: '*';
    color: red;
    margin-right: 3px;
  }
}
</style>
